<template>
  <div>
    <Myheader>
      <template #os>加班也要听歌歌</template>
      <template #center>☆☆☆ kiana music ☆☆☆</template>
    </Myheader>
    <WhiteSpace :space="20"></WhiteSpace>
    <div class="music-cotainer">
      <div class="left">
        爷最爱许嵩
      </div>
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="精选" name="first"></el-tab-pane>
          <el-tab-pane label="排行" name="second"></el-tab-pane>
          <el-tab-pane label="歌手" name="third"></el-tab-pane>
          <el-tab-pane label="123" name="fourth"></el-tab-pane>
        </el-tabs>
        <router-view/>
      </div>
      <go-top :isClicked="isClicked" />
    </div>
  </div>
</template>

<script>
import GoTop from '@/components/GoTop.vue';

export default {
  components: { GoTop },
  data() {
    return {
      activeName: 'first',
      isClicked: false,
    };
  },
  methods: {
    handleClick(tab) {
      switch(tab.label) {
        case '精选':
          this.$router.push('/music/recommend');
          break;
        case '排行':
          this.$router.push('/music/rank');
          break;
        case '歌手':
          this.$router.push('/music/singer');
          break;
        case '123':
          this.$router.push('/music/test')
          break;
        default:
          this.$router.push('/music/recommend');
          break;
      }
    },
    goTop(val) {
      console.log('click')
      window.scrollTo({ top: 0, smooth});
      val = true;
      setTimeout(() => {
        this.isClicked = false;
      }, 3000);
    },
  },
  async mounted() {
  }
};
</script>

<style lang="scss" scoped>
.music-cotainer {
  display: flex;
  padding-right: 20px;
  box-sizing: border-box;
  .left {
    width: 20vw;
  }
  .content {
    display: flex;
    flex-direction: column;
    // flex: 1;
    width: 70vw;
  }
}
</style>
